<template>
	<view class="relative moduleWrapper">
		<view class="box">
			<text class="txt absolute">请点击抽取你的惊喜</text>
		</view>
		<!-- 礼物 start -->
		<view class="image_wrapper relative">
			<view class="image_wrapper_item" data-type="0" @click.stop="onEnevnt">
				<image src="../../../static/gift.png" class="img" mode=""></image>
			</view>
			<view class="image_wrapper_item" data-type="1" @click.stop="onEnevnt">
				<image src="../../../static/gift.png" class="img" mode=""></image>
			</view>
			<view class="image_wrapper_item" data-type="2" @click.stop="onEnevnt">
				<image src="../../../static/gift.png" class="img" mode=""></image>
			</view>
			<view class="absolute image_head">
				<image src="../../../static/competitive.png" class="img image_head_img"></image>
			</view>
		</view>
		<!-- 礼物 end -->
		<view class="tip_wrapper">
			<text class="tip_wrapper_txt"><text>{{count}}</text>s后自动打开</text>
		</view>
		<!-- 旋转的星光 start -->
		<view class="bg_star_wrapper absolute">
			<view class="relative bg_star_box">
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
				<view class="rectangle absolute"></view>
			</view>
		</view>
		<!-- 旋转的星光 end -->
		<!-- 展开的钥匙 start -->
		<view class="bg_key_wrapper absolute">
			<view class="relative bg_key_box">
				<view class="bg_key_image">
					<image src="../../../static/key.png" class="key_image" mode="aspectFit"></image>
				</view>
				<view class="bg_key_image">
					<image src="../../../static/key.png" class="key_image" mode="aspectFit"></image>
				</view>
				<view class="bg_key_image">
					<image src="../../../static/key.png" class="key_image" mode="aspectFit"></image>
				</view>
				<view class="bg_key_image">
					<image src="../../../static/key.png" class="key_image" mode="aspectFit"></image>
				</view>
				<view class="bg_key_image">
					<image src="../../../static/key.png" class="key_image" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 展开的钥匙 end -->
		<!-- 中奖信息 start -->
		<view class="prize_info_wrapper">
			<view class="prize_info_box">
				<view class="prize_info_title text_c relative">太幸运了吧</view>
				<view class="prize_info_desc text_c relative">恭喜你获得福利</view>
				<view class="prize_info_image">
					<image class="prize_info_key" src="../../../static/prize_key.png" mode="aspectFit"></image>
				</view>
				<button size="default" type="default" class="prize_info_btn" hover-class="is-hover">立即使用</button>
			</view>
		</view>
		<!-- 中奖信息 end -->
	</view>
	<view class=" mask">
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		// computed
	} from 'vue'
	let count = ref(3);
	let timer = ref(null);
	// let touchX = ref(0);
	// let touchY = ref(0);
	onMounted(() => {
		setTimeout(autoCountDown, 2000);
	})
	// 计算图片样式
	// const imageStyle = computed(() => ({
	// 	transform: `translate(${touchX.value}px, ${touchY.value}px) translate(-50%, -50%)`
	// }));
	// 触摸事件处理函数
	// const onTouch = (event) => {
	// 	const touch = event.touches[0];
	// 	touchX.value = touch.clientX;
	// 	touchY.value = touch.clientY;
	// }
	// 监听gift点击事件
	const onEnevnt = (event) => {
		console.log('event', event);
		console.log('你好');
	}

	function autoCountDown() {
		timer = setInterval(function() {
			count.value--;
			if (count.value == 0) clearInterval(timer);
		}, 1000);
	}
</script>

<style scoped>
	.prize_info_btn {
		border-radius: 40rpx;
		background-color: #fe5607;
		color: #fff;
	}

	.prize_info_key {
		width: 60%;
		height: 80%;
	}

	.prize_info_image {
		width: 100px;
		height: 150px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text_c {
		text-align: center;
	}

	.prize_info_box {
		width: 60%;
		border-radius: 20px;
		padding: 40rpx;
		background: linear-gradient(to bottom, #fffffd, #fff6d4);
	}

	.prize_info_desc {
		font-size: 24rpx;
	}

	.prize_info_desc::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 15%;
		width: 30px;
		height: 1px;
		background-color: #333;
	}

	.prize_info_desc::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 15%;
		width: 30px;
		height: 1px;
		background-color: #333;
	}

	.prize_info_title {
		font-size: 40rpx;
		margin-bottom: 10px;
		font-weight: bold;
	}

	.prize_info_wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0);
		animation: prizeInfoBoundIn 1s cubic-bezier(0.42, 0, 0.58, 1) 10.2s;
		animation-fill-mode: forwards;
	}

	@keyframes prizeInfoBoundIn {
		0% {
			transform: scale(0);
		}

		40% {
			transform: scale(1.2);
		}

		60% {
			transform: scale(0.8);
		}

		80% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}

	.bg_key_image:nth-child(5) {
		animation: keyTranslate5 1s ease-in-out 7s;
		animation-fill-mode: forwards;
	}

	.bg_key_image:nth-child(4) {
		animation: keyTranslate4 1s ease-in-out 8s;
		animation-fill-mode: forwards;
	}

	.bg_key_image:nth-child(3) {
		animation: keyTranslate3 1s ease-in-out 9s;
		animation-fill-mode: forwards;
	}

	.bg_key_image:nth-child(2) {
		animation: keyTranslate2 1s ease-in-out 8s;
		animation-fill-mode: forwards;
	}

	.bg_key_image:nth-child(1) {
		animation: keyTranslate1 1s ease-in-out 7s;
		animation-fill-mode: forwards;
	}

	.key_image:nth-child(5) {
		transform: scale(0);
		animation: keyScale 1s ease-in-out 6s;
		animation-fill-mode: forwards;
	}

	.key_image:nth-child(4) {
		transform: scale(0);
		animation: keyScale 1s ease-in-out 6s;
		animation-fill-mode: forwards;
	}

	.key_image:nth-child(3) {
		transform: scale(0);
		animation: keyScale 1s ease-in-out 6s;
		animation-fill-mode: forwards;
	}

	.key_image:nth-child(2) {
		transform: scale(0);
		animation: keyScale 1s ease-in-out 6s;
		animation-fill-mode: forwards;
	}

	.key_image:nth-child(1) {
		transform: scale(0);
		animation: keyScale 1s ease-in-out 6s;
		animation-fill-mode: forwards;
	}

	@keyframes keyTranslate3 {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(2.5);
		}
	}

	@keyframes keyTranslate5 {
		0% {
			opacity: 1;
			transform: translateX(0);
		}

		100% {
			opacity: 0;
			transform: translateX(-78px);
		}
	}

	@keyframes keyTranslate4 {
		0% {
			opacity: 1;
			transform: translateX(0);
		}

		100% {
			opacity: 0;
			transform: translateX(-77px);
		}
	}

	@keyframes keyTranslate2 {
		0% {
			opacity: 1;
			transform: translateX(0);
		}

		100% {
			opacity: 0;
			transform: translateX(77px);
		}
	}

	@keyframes keyTranslate1 {
		0% {
			opacity: 1;
			transform: translateX(0);
		}

		100% {
			opacity: 0;
			transform: translateX(78px);
		}
	}

	@keyframes keyScale {
		0% {
			transform: scale(0);
		}

		100% {
			transform: scale(1);
		}
	}

	.bg_key_box {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.key_image {
		width: 80px;
		height: 80px;
	}

	.bg_key_wrapper {
		width: 100%;
		left: 0;
		top: calc(42% - 27px);
	}

	.bg_star_box {
		transform: translate(0, 180px);
	}

	.rectangle {
		position: absolute;
		width: 50%;
		height: 30px;
		top: 0;
		left: calc(50% - 95px);
		background: linear-gradient(to left, rgba(255, 255, 224, .6), rgba(255, 255, 224, 0));
		clip-path: polygon(10% 0%, 100% 50%, 10% 100%, 10% 50%);
		transform-origin: 50% 50%;
	}

	.rectangle:nth-child(1) {
		transform: rotate(0deg) translateX(-50%);
	}

	.rectangle:nth-child(2) {
		transform: rotate(30deg) translateX(-50%);
	}

	.rectangle:nth-child(3) {
		transform: rotate(60deg) translateX(-50%);
	}

	.rectangle:nth-child(4) {
		transform: rotate(90deg) translateX(-50%);
	}

	.rectangle:nth-child(5) {
		transform: rotate(120deg) translateX(-50%);
	}

	.rectangle:nth-child(6) {
		transform: rotate(150deg) translateX(-50%);
	}

	.rectangle:nth-child(7) {
		transform: rotate(180deg) translateX(-50%);
	}

	.rectangle:nth-child(8) {
		transform: rotate(210deg) translateX(-50%);
	}

	.rectangle:nth-child(9) {
		transform: rotate(240deg) translateX(-50%);
	}

	.rectangle:nth-child(10) {
		transform: rotate(270deg) translateX(-50%);
	}

	.rectangle:nth-child(11) {
		transform: rotate(300deg) translateX(-50%);
	}

	.rectangle:nth-child(12) {
		transform: rotate(330deg) translateX(-50%);
	}

	.image_head {
		right: 0;
		top: 70px;
		width: 114rpx;
		height: 114rpx;
		opacity: 1;
		animation: headAnime 3s ease-in-out 2s forwards;
	}

	.bg_star_wrapper {
		left: 0;
		top: 100px;
		width: 400px;
		height: 400px;
		transform-origin: 50% 50%;
		opacity: 0;
		animation: bgDsiplay 1s ease-in-out 6s forwards;
	}

	@keyframes bgDsiplay {
		0% {
			transform: rotate(0) scale(0.8);
			opacity: 0;
		}

		50% {
			tranform: rotate(-45deg) scale(1);
			opacity: 1;
		}

		100% {
			transform: rotate(45deg);
			opacity: 0;
		}
	}

	.tip_wrapper_txt {
		color: #fff;
		animation: giftDisplayTwo 3s ease-in-out 2s;
	}

	.tip_wrapper {
		margin-top: 50px;
		text-align: center;
		opacity: 0;
		animation: txtWrapper_display 3s ease-in-out 2s, giftAfterDisplay 2s ease-in-out 4s;
		animation-fill-mode: forwards;
	}

	@keyframes txtWrapper_display {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.3;
		}
	}

	.image_wrapper_item:nth-child(2) {
		animation: giftDisplayTwo 3s ease-in-out 2s, giftAfterDisplay 2s ease-in-out 4s;
		animation-fill-mode: forwards;
	}

	.image_wrapper_item:nth-child(1),
	.image_wrapper_item:nth-child(3) {
		animation: giftDisplay 3s ease-in-out 2s;
		animation-fill-mode: forwards;
	}

	.image_wrapper_item {
		width: 100px;
		height: 100px;
		margin-right: 30px;
		opaicty: 1;
		/* animation-fill-mode: forwards; */
	}

	@keyframes giftAfterDisplay {
		0% {
			opacity: 100%;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes giftDisplayTwo {
		0% {
			transform: scale(1.25);
		}

		15% {
			transform: scale(1)
		}

		30% {
			transform: scale(1.25);
		}

		45% {
			transform: scale(1)
		}

		60% {
			transform: scale(1.25);
		}

		75% {
			transform: scale(1)
		}

		90% {
			transform: scale(1.25);
		}

		100% {
			transform: scale(1.5);
		}
	}

	@keyframes headAnime {
		0% {
			right: -10px;
			top: 90px;
		}

		15% {
			right: 10px;
			top: 70px;
		}

		30% {
			right: -10px;
			top: 90px;
		}

		45% {
			right: 10px;
			top: 70px;
		}

		60% {
			right: -10px;
			top: 90px;
		}

		75% {
			right: 10px;
			top: 70px;
		}

		90% {
			right: -10px;
			top: 90px;
			opacity: 1;
		}

		100% {
			right: -100px;
			top: 100px;
			opacity: 0;
		}
	}

	@keyframes giftDisplay {
		0% {
			transform: scale(1);
		}

		15% {
			transform: scale(1.25)
		}

		30% {
			transform: scale(1);
		}

		45% {
			transform: scale(1.25)
		}

		60% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.25);
			opacity: 1;
		}

		90% {
			transform: scale(1);
		}

		100% {
			transform: scale(0.8);
			opacity: 0;
		}
	}

	.image_wrapper_item:last-child {
		margin-right: 0;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.image_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100px;
		opacity: 0;
		animation: imageWrapper_display 1s ease-in-out 2s forwards;
	}

	@keyframes imageWrapper_display {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.moduleWrapper {
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
	}

	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.box {
		margin-top: 50px;
	}

	.txt {
		right: -100%;
		top: 0;
		animation: txtmove ease-in-out 2s, giftAfterDisplay 2s ease-in-out 4s;
		/* Safari and Chrome */
		-webkit-animation: txtmove ease-in-out 2s, giftAfterDisplay 2s ease-in-out 4s;
		animation-fill-mode: forwards;
		color: #fffae6;
		white-space: nowrap;
		font-size: 50rpx;
		text-shadow:
			0 0 5px #fffae6,
			/* 内部的光晕 */
			0 0 10px #fffae6,
			0 0 10px #e7e700,
			/* 外部的粉红光晕 */
			0 0 10px #e7e700;
		z-index: 1;
	}

	@keyframes txtmove {
		0% {
			right: -100%;
		}

		80% {
			right: 60%;
		}

		100% {
			right: 50%;
			transform: translateX(50%);
		}
	}
</style>